<template>
  <div class="sys-ctrl">
    <template v-if="btns.length <= minScale">
      <el-button
        v-for="(item, index) in btns"
        :key="index"
        v-perm="item.permission"
        :disabled="isDisabledButton(item, scope.row)"
        :type="item.type || 'text'"
        size="small"
        @click="item.click(scope)"
      >{{ handlegetLable(scope.row, item.label) }}
      </el-button>
    </template>
    <template v-else>
      <el-button
        v-for="(item, index) in preBtns"
        :key="index"
        :disabled="isDisabledButton(item, scope.row)"
        :type="item.type || 'text'"
        size="small"
        v-perm="item.permission"
        @click="item.click(scope)"
      >{{ handlegetLable(scope.row, item.label) }}
      </el-button>
      <el-dropdown trigger="hover" @command="handleCommand">
          <span class="el-dropdown-link">
            更多<i class="el-icon-caret-bottom el-icon--right"/>
          </span>
        <el-dropdown-menu slot="dropdown" class="ctrl-menu">
          <el-dropdown-item v-for="(item, index) in moreBtns"
              :command="index"
              :key="index"
              v-if="$hasPerm(item.permission)"
             :disabled="isDisabledButton(item, scope.row)"
          >
            {{ handlegetLable(scope.row, item.label) }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </template>
  </div>
</template>

<script>
export default {
  name: 'sys-ctrl',
  cnName: '页面-按钮操作',
  props: {
    btns: Array,
    scope: Object,
    minScale: {
      type: Number,
      default: 3
    }
  },
  data() {
    return {}
  },
  computed: {
    moreBtns() {
      const list = this.btns.filter((el, index) => index >= this.minScale - 1)
      return list
    },
    preBtns() {
      const list = this.btns.filter((el, index) => index < this.minScale - 1 )
      return list
    }
  },
  methods: {
    // 是否disabled
    isDisabledButton(item, row) {
      if (typeof item.isDisable === 'function') {
        return item.isDisable(row);
      } else {
        return !!item.disabled;
      }
    },
    handlegetLable(item, label) {
      if (typeof label === 'function') {
        return label(item);
      } else {
        return label;
      }
    },
    handleCommand(command) {
      console.info(command, this.scope)
      this.moreBtns[command].click(this.scope)
    }
  }
}
</script>

<style lang="scss" scoped>
.sys-ctrl {
  display: inline-block;

  .el-dropdown-link {
    color: #1890ff;
    padding: 9px 15px;
    font-size: 12px;
    border-radius: 3px;
  }

}

.ctrl-menu ::v-deep {
  .el-dropdown-menu__item {
    color: #1890ff;
    font-size: 12px;
    padding: 0 30px;
  }
}
</style>

